<template>
  <uni-nav-bar
    :leftIcon="!hideLeft ? leftIcon : undefined"
    backgroundColor="transparent"
    fixed
    statusBar
    :border="false"
    @clickLeft="handleLeft"
    v-bind="attrs"></uni-nav-bar>
  <!-- 菜单的顶部背景图 -->
  <view
    v-if="bgInfo?.url || bgInfo?.type == 'colorBg'"
    class="md-nav-bar-bg-wrap"
    :style="{
      marginTop: data.topTotalUpHeight,
      height: bgInfo?.height,
      background: bgInfo?.backgroundColor,
    }">
    <image
      v-if="bgInfo?.url"
      class="md-nav-bar-bg"
      :src="bgInfo.url"
      mode="aspectFill"
      :style="{ height: bgInfo?.height }" />
    <image v-if="bgInfo?.showLogo" src="https://cdn.xmxiaomai.com/isong_static/logo.png" class="md-nav-bar-logo" />
    <!-- 内容 -->
    <view
      v-if="['bg', 'colorBg'].includes(bgInfo.type)"
      class="md-content"
      :style="{ top: data.topTotalHeight, height: `calc(100vh - ${data.topTotalHeight})` }">
      <slot />
    </view>
  </view>
</template>
<script setup lang="ts">
import { reactive, useAttrs } from 'vue';
const attrs = useAttrs(); // 透传过来的属性及方法
const { statusBarHeight, platform } = uni.getSystemInfoSync();

const data = reactive({
  topTotalUpHeight: `calc(-${statusBarHeight}px + -${platform === 'android' ? 48 : 44}px)`,
  topTotalHeight: `calc(${statusBarHeight}px + ${platform === 'android' ? 48 : 44}px)`,
});

interface PropsType {
  hideLeft?: boolean; // 是否隐藏返回按钮
  leftIcon?: string
  backUrl?: string;
  bgInfo?: {
    /**
     * top     只有头部，没有背景图及背景色背景
     * bg      背景图
     * colorBg 背景色背景
     */
    type: 'top' | 'bg' | 'colorBg';
    url: string; // 背景图片地址
    height?: number | string; // 背景图片高度，要加单位，只有【type = bg】才生效
    backgroundColor?: string; // 只有【type = colorBg】存在才生效
  };
}
// 接收props
let props = withDefaults(defineProps<PropsType>(), {
  hideLeft: false,
  leftIcon: 'left',
  backUrl: '',
  bgInfo: () => ({
    type: 'top',
    url: '',
  }),
});

// 返回【click】
let handleLeft = () => {
  if (props.hideLeft) return; // 不存在返回按钮，则点击无效
  //获取路由
  let routes = getCurrentPages();
  // 如果有指定返回地址
  if(props.backUrl) {
    uni.reLaunch({
      url: props.backUrl,
    });
    return;
  }
  // 说明不是刷新，分享等单个路由。
  if (routes && routes.length > 1) return uni.navigateBack();
  uni.reLaunch({
    url: '/pages/index/index',
  });
};
</script>
<style lang="scss" scoped>
.md-nav-bar-bg-wrap {
  position: relative;
  .md-content {
    width: 100%;
    position: absolute;
    left: 0;
    overflow-y: auto;
  }
}
.md-nav-bar-bg {
  width: 100%;
  display: block;
}
.md-nav-bar-logo {
  position: absolute;
  left: 3vw;
  top: 6vh;
  width: 21vw;
  height: 10vw;
}
</style>
